{extend name="./app/admin/view/main.html" /}
{block name="title"}分类管理 - 文章 -{__block__}{/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}

<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">文章</h4> <h5 class="sub-title">分类树管理</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='categoryAddDialog'>
            <span><Icon type="md-add"></Icon> 添加分类</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">

    <aside class="side-box box2 mip-box" style="height: calc(100% - 50px - 92px);bottom: 15px;">
        <section class="side-box-body">
            <tree :data="catetree" @on-select-change="on_select_tree_node"></tree>
        </section>
    </aside>

    <section class="content-box box2">
    <section class="mip-box">
        <section class="mip-box-body">
            <section class="diy-table-list" v-cloak>

                <table class="table table-hover diy-table-list">
                    <thead>
                    <tr class="diy-table-item-header">

                        <th style="width:60px">ID</th>
                        <th >名称 </th>
                        <th style="width:100px">排序</th>
                        <th style="width:160px">分类地址</th>
                        <th style="width:100px">操作</th>
                    </tr>
                    </thead>

                    <tbody class="diy-table-body">
                    <template v-if='categoryList' v-for='(item,index) in categoryList'>
                        <tr class="tr1 diy-table-item">

                            <td>{{item.id}}</td>
                            <td><a :href="item.url" target="_blank">{{item.title}}</a> </td>

                            <td>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveUp(item)'
                                          :disabled='index==0'>
                                    <Icon type="md-arrow-round-up" />
                                </i-Button>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveDown(item)'
                                          :disabled='categoryList.length==index+1'>
                                    <Icon type="md-arrow-round-down" />
                                </i-Button>
                            </td>
                            <td> {{item.url}}  </td>
                            <td>
                                <Button-Group size="small" shape="circle">
                                    <i-button type="success" @click="categoryEditDialog(index, item)">修改</i-button>
                                    <i-button type="warning" :disabled="item.children && item.children.length != 0" @click="categoryDel(index, item)">删除</i-button>
                                </Button-Group>
                            </td>
                        </tr>


                    </template>

                    <template v-if="categoryList.length==0">
                        <tr>
                            <td colspan="7" class="no-block">
                                <Icon type="ios-filing-outline"></Icon>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    </template>
                    </tbody>

                </table>

            </section>
        </section>
    </section>
    </section>
</main>
<Modal v-model="dialogCategory" size="large" v-cloak>
    <i-form :model="category" :rules="categoryRules" ref="category" :label-width="100">
        <Tabs :animated='false' v-model="itemTabsValue">
            <Tab-Pane label="基础信息" name='default'>
                <Form-Item label="所属上级分类" prop="title">
                    <Cascader :data="categoryListForCascader" v-model="selectedCids" change-on-select="true" transfer="true" style="width: 300px;"></Cascader>
                </Form-Item>
                <Form-Item label="分类名称" prop="title">
                    <i-input v-model="category.title" placeholder="例：平步新闻"></i-input>
                    <span class="form-note">默认显示在前台网页的title</span>
                </Form-Item>
                <Form-Item label="列表URL">
                    <i-Select v-model="category.list_preurl" transfer style="width:200px">
                        <i-Option v-for="item in list_preurls" :value="item" :key="item">{{ item }}</i-Option>
                    </i-Select>
                    <span class="form-note">列表页面的URL</span>
                </Form-Item>
                <Form-Item label="详情URL">
                    <i-Select v-model="category.detail_preurl" transfer style="width:200px">
                        <i-Option v-for="item in detail_preurls" :value="item" :key="item">{{ item }}</i-Option>
                    </i-Select>
                    <span class="form-note">详情页面的URL</span>
                </Form-Item>
            </Tab-Pane>

        </Tabs>
    </i-form>
    <div slot="footer" class="dialog-footer">

        <i-button type="primary" @click="categoryPost('category',category)">确 定</i-button>
        <i-button @click="dialogCategory = false">取 消</i-button>
    </div>
</Modal>

{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            dialogCategory: false,
            dialogCategoryTitle: '',

            saveStatus: 'add',
            catetree: [],
            curr_cateid: 0,
            categoryListForCascader: [],
            selectedCids: [],
            category: {
                isChild: false,
                id: '',
                pid: 0,
                title: '',
                list_preurl: '',
                detail_preurl: '',

            },
            categoryRules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
            },

            categoryList: [],
            list_preurls: [],
            detail_preurls: [],
            itemTabsValue: 'default',
        },
        watch: {},
        mounted() {
            this.getTemplatePreurls();
            this.getCategoryList(this.curr_cateid);
            this.getCategoryTree();

        },
        methods: {
            moveUp: function(item){
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_move_up', {
                    id: item.id,
                }).then(function (res) {
                    if(res.code==1){
                        _this.categoryListForCascader = [];
                        _this.getCategoryList(_this.curr_cateid);
                        _this.getCategoryTree();
                    }
                });
            },
            moveDown: function(item){
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_move_down', {
                    id: item.id,
                }).then(function (res) {
                    if(res.code==1){
                        _this.categoryListForCascader = [];
                        _this.getCategoryList(_this.curr_cateid);
                        _this.getCategoryTree();
                    }
                });
            },

            getTemplatePreurls() {
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/get_info_by_filename', {}).then(res => {
                    if (res.code == 1) {
                        this.list_preurls = res.data.info.article_list_preurls;
                        this.detail_preurls = res.data.info.article_detail_preurls;
                    }
                });
            },
            categoryAddDialog: function () {
                this.selectedCids = [];

                this.getCategoryListForCascader();

                this.saveStatus = 'add';
                this.itemTabsValue = 'default';

                this.category.isChild = false;
                this.category.pid = 0;
                this.category.title = '';
                this.category.description = '';
                this.category.list_preurl = '';
                this.category.detail_preurl = '';
                this.category.id = '';

                this.dialogCategory = true;
                this.dialogCategoryTitle = '添加分类';
            },
            categoryEditDialog(index, row) {
                this.selectedCids = [];

                this.getCategoryListForCascader();

                this.itemTabsValue = 'default';
                this.dialogCategory = true;
                this.dialogCategoryTitle = '编辑分类';

                this.saveStatus = 'edit';
                this.category.title = row.title;
                this.category.description = row.description;
                this.category.pid = row.pid;

                this.category.list_preurl = row.list_preurl;
                this.category.detail_preurl = row.detail_preurl;

                this.category.id = row.id;
                this.category.isChild = false;

                let arrFullid = row.fullid.split(',');
                arrFullid.pop();
                arrFullid.pop();

                this.selectedCids = arrFullid;
            },

            categoryPost(val, param) {

                if(this.category.list_preurl == '' ){
                    this.category.list_preurl = this.list_preurls[0];
                }
                if(this.category.detail_preurl == '' ){
                    this.category.detail_preurl = this.detail_preurls[0];
                }

                this.$refs[val].validate((valid) => {
                    if (valid) {
                        this.category.pid= this.selectedCids[this.selectedCids.length-1];

                        if (this.saveStatus == 'add') {
                            this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_add', this.category).then(res => {
                                if (res.code == 1) {
                                    this.dialogCategory = false;
                                    this.$Message.success(res.msg);

                                    this.categoryListForCascader = [];
                                    this.getCategoryList(this.curr_cateid);
                                    this.getCategoryTree();

                                }
                            });
                        } else {
                            this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_edit', this.category).then(res => {
                                if (res.code == 1) {
                                    this.dialogCategory = false;
                                    this.$Message.success(res.msg);

                                    this.categoryListForCascader = [];
                                    this.getCategoryList(this.curr_cateid);
                                    this.getCategoryTree();
                                }
                            });
                        }
                    }
                });
            },
            categoryDel(index, val) {
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p style="color:#ff9900;">删除项：' + val.name + '</p><p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_del', {
                            id: val.id,
                        }).then(res => {
                            if (res.code == 1) {
                                this.$Message.success(res.msg);
                                this.categoryListForCascader = [];
                                this.getCategoryList(this.curr_cateid);
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getCategoryList: function (pid) {
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/get_list', {'pid':pid}).then(res => {
                    if (res.code == 1) {
                        var categoryList = res.data.categoryList;
                        _this.categoryList = categoryList;

                    }
                });
            },
            getCategoryTree: function(){
                let _this = this;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/get_full_tree', {}).then(res => {
                    let t1 = res.data;
                    if(t1) {
                        for (let i = 0; i < t1.length; i++) {
                            t1[i].expand = true;
                        }
                    }
                    let t2 = [{'title':'分类树','id':0 , expand:true,children: t1 }]
                    _this.catetree = t2 ;
                } );
            },
            getCategoryListForCascader: function() {
                var _this = this;
                if(_this.categoryListForCascader && _this.categoryListForCascader.length > 0){
                    return;
                }
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/get_for_full_cascader', {}).then(res => {
                    if(res.code == 1) {
                        let categoryList = res.data;
                        this.categoryListForCascader = categoryList;
                    }
                });
            },
            on_select_tree_node:function(arg1,arg2){
                this.curr_cateid = arg2.id;
                this.getCategoryList(this.curr_cateid );
            },



        }
    })
</script>
{/block}